<template>
	<view style="background-color: #f7f7f7;">
		<view class="top">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>			
			<view style="text-align: center; font-size: 35rpx; color: #fff;" v-if="edit">注册</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff;" v-if="!edit">商户资料</view>
			<view class="card">
				<view class="input_line">
					<text>优惠期名称</text>
					<input class="input" type="text"  v-model="coupon.name"/>
				</view>
				<!-- #ifdef H5 -->
				<view class="input_line">
					<text>优惠券类型</text>
					<radio-group v-model="coupon.type" @change="typeChange">
						<label v-for="(item, index) in radioItems" :key="index" style="margin-left: 40rpx;">
							{{item.label}}	
							<radio :value="item.value"/>						
						</label>
					</radio-group>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="input_line">
					<text>优惠券类型</text>
					<radio-group v-model="coupon.type" @change="typeChange">
						<label v-for="(item, index) in radioItems" :key="index" style="margin-left: 40rpx;">
							{{item.label}}	
							<radio :value="item.value"/>						
						</label>
					</radio-group>
				</view>
				<!-- #endif -->
				<view class="dis_count" v-if="coupon.type==2">打<u>{{ coupon.discount }}</u>折</view>
				<view class="dis_count" v-if="coupon.type==1">满<u>{{ coupon.count1 }}</u>元减<u>{{ coupon.count2 }}</u>元</view>
				<view class="dis_count" v-if="coupon.type==''">&nbsp; </view>
				<view class="input_line">
					<text>发放开始时间</text>
					<input class="input" type="text"  v-model="coupon.start"/>
				</view>
				<view class="input_line" >
					<text>发放结束时间</text>
					<input class="input" type="text"  v-model="coupon.end"/>
				</view>
				<view class="input_line">
					<text>投放数量</text>
					<input class="input_s" type="text" v-model="coupon.num"/>张
				</view>
				<view class="input_line">
					<text>每人限领</text>
					<input class="input_s" type="text" v-model="coupon.pnum"/>张
				</view>
				<view class="input_line">
					<text>使用有效期</text>
					<input class="input" type="text" v-model="coupon.time"/>
				</view>
			</view>
		</view>	
		<view style="height: 500rpx;"></view>
		<button @click="toIndex()" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #5590f8; color: white;">确认投放</button>
	</view>
</template>

<script setup>
import { ref } from 'vue';


	function backPage(){
		uni.navigateBack()
	}

	
	const coupon = ref({
		name: '',
		type: '',
		discount:'5',
		count1: '100',
		count2: '20',
		start:'',
		end:'',
		num:'',
		pnum:'',
		time:''
	
	})
	
	const radioItems = ref(
		[{
			label: '满减券', value: 1
		},
		{
			label: '打折券', value: 2
		}]
	)
	
	
	const typeChange= (event) => {
		// console.log('选择的值是:', event.detail.value);
		if(event.detail.value==1){
			coupon.value.type = 1
		}else{
			coupon.value.type = 2
		}
		
	}
	
	function toIndex(){
		uni.navigateTo({
			url:'/pages/index/index'
		})
	}
	
	function onLogin(){
		uni.redirectTo({
			url:'/pages/login/login'
		})
	}
	
</script>

<style>
@import "@/common/app.css";
.card{border-radius: 20px; background-color: #fff; margin: 30rpx; padding: 30rpx 20rpx;}
.input_line{ font-weight: 500; margin: 30rpx 10rpx; padding-left: 20rpx; display: flex; justify-content: space-between; align-items: center;}
.input{ border: 1px solid gray; padding: 10rpx 15rpx; border-radius: 20px; font-size: 20rpx; font-weight: 600; }
.input_s{ border: 1px solid gray; padding: 10rpx 15rpx; margin-left: 75rpx; border-radius: 20px; font-size: 20rpx; font-weight: 600;  width: 150rpx; }
.big_title{margin-left: 20rpx; font-weight: 600;}	    
.upload-box {display: flex;flex-direction: column; align-items: center;cursor: pointer;}
.plus-icon {font-size: 40px; color: #ccc; margin-bottom: 10px;}
.upload-text {font-size: 12px; color: #999;}
.dis_count { text-align: end; margin-right: 50rpx; }

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	  
</style>

